<template>
	<view>
		<view style="width: 90%;margin: 40rpx auto;">
			<uni-forms ref="form" :value="resetRequest" :rules="rules">
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput type="number" v-model="resetRequest.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="password">
					<uni-easyinput type="password" v-model="resetRequest.password" placeholder="请输入新密码" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="password2">
					<uni-easyinput type="password" v-model="resetRequest.password2" placeholder="请确认新密码" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="code">
					<view style="display: flex;justify-content: space-between;">
						<uni-easyinput class="log-input" type="text" v-model="resetRequest.code" placeholder="请输入验证码"
							placeholder-style="text-align: center;">
						</uni-easyinput>
						<button v-show="!timeButton" style="font-size: small;background-color: #808080;color: white;"
							@click="phoneCheck">发送验证码</button>
						<button v-show="timeButton" style="font-size: small;background-color: #808080;color: white;"
							disabled>{{leftTime}}秒后重新获取</button>
					</view>
				</uni-forms-item>
				<button @click="resetPwd" type="primary">重置密码</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resetRequest: {
					phone: '',
					password: '',
					password2: '',
					code: ''
				},
				// 控制倒计时按钮和点击按钮的切换
				timeButton: false,
				leftTime: 120,
				timeButton2: false,
				// 弹出层
				err: null,
				success: null,
				dialogSuccess: null,
				rules: {
					// 对name字段进行必填验证
					phone: {
						rules: [{
								required: true,
								errorMessage: '手机号不能为空'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (!(/^[1]([3-9])[0-9]{9}$/.test(data.phone))) {
										callback('手机号格式不正确')
									}
									return true
								}
							}
						]
					},
					// 对密码字段进行必填验证
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					password2: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					}
				}
			}
		},
		methods: {
			// 发送验证码
			phoneCheck() {
				if (this.resetRequest.phone == null || this.resetRequest.phone == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 2000
					})
					return
				}
				// 手机号正则
				if (!this.resetRequest.phone.match(/^[1]([3-9])[0-9]{9}$/)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 2000
					})
					return
				}
				// 发送请求
				this.$http.request({
					url: '/organizations/web/user/message',
					method: 'POST',
					authType: 'NONE',
					data: {
						'phone': this.resetRequest.phone,
						'type': 1
					}
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.timeButton = true
						// 倒计时120s
						var that = this
						var myInterval = setInterval(function() {
							that.leftTime--
						}, 1000)
						setTimeout(function() {
							// 停止倒计时
							clearInterval(myInterval)
							// 初始化剩余时间
							that.leftTime = 120
							// 隐藏时间按钮
							that.timeButton = false
						}, 120000)
						uni.showToast({
							title: res.msg,
							mask: true,
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true,
							duration: 2000
						})
					}
				}).catch(res => {
					res = res.data;
					this.logerr = "请求失败"
					this.$refs.logerr.open()
				})
			},
			// 重置密码
			resetPwd() {
				this.$refs.form.submit().then(res => {
					// 检查两次密码是否一致
					if (this.resetRequest.password !== this.resetRequest.password2) {
						uni.showToast({
							title: '两次密码不一致',
							mask: true,
							duration: 2000,
							icon: 'none'
						})
						return
					}
					// 重置密码
					var that = this;
					this.$http.request({
						url: '/organizations/web/user/reset',
						method: 'POST',
						data: this.resetRequest,
						authType: 'NONE'
					}).then(res => {
						res = res.data;
						if (res.result) {
							uni.showModal({
								content: res.msg,
								showCancel: false,
								success: function() {
									// 清除数据
									that.resetRequest.code = null;
									that.resetRequest.phone = null;
									that.resetRequest.password = null;
									that.resetRequest.password2 = null;
									// 跳转到登录页
									uni.redirectTo({
										url: './login'
									})
								}
							})
						} else {
							uni.showModal({
								title: '错误',
								content: res.msg,
								showCancel: false
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style>
</style>
